import 'package:flutter/material.dart';
import 'listview_demo.dart';

class layout_demoHome02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//
      debugShowCheckedModeBanner: false,
      home: layout_demoHome021(),
      theme: ThemeData(//主题
        primaryColor: Colors.blue,
      ),
    );
  }
}

class layout_demoHome021 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(//navigation
      backgroundColor: Colors.grey[100],
      appBar: AppBar(//navigationbar
        title: Text('Flutter Demo'),
      ),
      body: LayoutDemo(),
    );
  }
}


/*
 * 关于主轴:mainAxisAlignment
 * spaceBetween 剩下的空间平均分布到小部件之间  1👌2👌2👌1
 * spaceAround  剩下的空间平均分布到小部件的周围 👌1👌1👌
 * spaceEvenly  剩下的空间和小部件一起平均分布 1👌1👌1👌1
 * */

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      // alignment: Alignment(0.0, 0.0), //x,y
      child: AspectDemo(),
      // child: StackDemo(),
      // child:RowDemo(),
      // child: ListViewDemo(),//列表
    );
  }
}

//AspectRatio 宽高比例布局 aspectRatio
class AspectDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 150,
      child: AspectRatio(
        aspectRatio: 1 / 4,//宽高比
        child: Icon(Icons.add, size: 30),
      ),
    );
  }
}

/*
* Expanded 填充式布局，主轴不留间隙的填充， 主轴设置和长度没有意义
Positioned 相对Stack容器最值（左右最宽，上下最长），相对布局，上下左右对齐 = Container
* */

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment(-0.0, -1.0),
      children: <Widget>[
        Positioned(
          child: Container(
            color: Colors.white,
            width: 400,
            height: 200,
            child: Icon(Icons.add),
          ),
        ),
        Positioned(
            child: Container(
          color: Colors.red,
          width: 250,
          height: 250,
          child: Icon(Icons.search),
        )),
        Positioned(
          right: 0,
          top: 0,
          child: Container(
            color: Colors.blue,
            width: 50,
            height: 50,
            child: Icon(Icons.search),
          ),
        ),
      ],
    );
  }
}

//主轴与交叉轴跟 row和column有关 他两相反
/*
* 交叉轴：crossAxisAlignment；主轴不影响交叉轴布局
* start上对齐，end下对齐
*baseline必须要textBaseline
* // alphabetic  英文字符  //ideographic  中文字符 第一行中文底部对齐
*
* */
class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      // crossAxisAlignment: CrossAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      //alphabetic  英文字符
      //ideographic 中文字符
      children: <Widget>[
        Expanded(//Expanded 填充式布局，主轴不留间隙的填充 主轴设置和长度没有意义
          child: Container(
            // height: 80,
            color: Colors.white,
            child: Text(
              // '英文',
              'hello',
              style: TextStyle(fontSize: 15),
            ),
          ),
        ),
        Expanded(
          child: Container(
            // height: 80,
            color: Colors.blue,
            child: Text(
              // '字符',
              '嘿嘿12312312',
              style: TextStyle(fontSize: 30),
            ),
          ),
        ),
        Expanded(
          child: Container(
            // height: 80,
            color: Colors.red,
            child: Text(
              // '中文英文中文英文中文英文',
              'heihei',
              style: TextStyle(fontSize: 60),
            ),
          ),
        ),
      ],
    );
  }
}
